<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
         <div slot="header" class="clearfix">
             <span>试题录入</span>
         </div>
        <el-form
        label-width="100px"
        :model="formData"
        :rules="formRules"
        ref="formRef">
          <el-form-item label="学科：" prop="subjectID">
            <el-select
            placeholder="请选择"
            style="width:400px"
            v-model="formData.subjectID"
            @click.native="getSubList"
            >
              <el-option :label="item.label" :value="item.value" v-for="item in SubList" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录：" prop="catalogID">
            <el-select
            placeholder="请选择"
            style="width:400px"
            v-model="formData.catalogID"
            @click.native="getCataList"
            >
              <el-option
              :label="item.label"
              :value="item.value"
              v-for="item in cataList"
              :key="item.value"
              ></el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="企业：" prop="enterpriseID">
            <el-select  placeholder="请选择" style="width:400px" v-model="formData.enterpriseID" @click.native="getEnter">
              <el-option :label="item.company" :value="item.id" v-for="item in entryList" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-row :gutter="40">
            <el-col :span="4">
             <el-form-item label="城市：" prop="province">
               <el-select
                  placeholder="请选择"
                  style="width:198px;margin-right:5px"
                  v-model="formData.province"
                  @click.native="getProvinces"
                  @change="hanleChange"
                  >
                    <el-option
                    :label="item"
                    :value="item"
                    v-for="item in provinces"
                    :key="item"></el-option>
                  </el-select>
               </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item  prop="city">
             <el-select
             placeholder="请选择"
             style="width:198px"
             v-model="formData.city"
             @click.native="getCitys"
            >
              <el-option
               :label="item"
               :value="item"
               v-for="item in citys"
               :key="item"
               ></el-option>
            </el-select>
          </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="方向：" prop="direction">
            <el-select  placeholder="请选择" style="width:400px" v-model="formData.direction" @click.native="getDirection">
              <el-option :label="item" :value="item" v-for="item in directionList" :key="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型：" prop="questionType">
            <el-radio-group v-model="formData.questionType">
              <el-radio :label="item.value+''"  v-for="item in question" :key="item.value">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度：" prop="difficulty">
            <el-radio-group v-model="formData.difficulty">
              <el-radio :label="item.value+''" v-for="item in diff" :key="item.value">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="题干：" prop="question">
              <Tinymce :height="200" v-model="formData.question" ></Tinymce>
          </el-form-item>
          <!-- 单选框 -->
          <el-form-item label="选项："  v-if="formData.questionType!=='3'" prop="options">
            <div v-for="item in formData.options" :key="item.code" class="option-box">
                  <el-radio :label="true" v-model="item.isRight" style="margin-right: 5px;" v-if="formData.questionType==='1'" @change="changeRadio(item)">{{item.code}}：</el-radio>
                  <el-checkbox v-if="formData.questionType==='2'" v-model="item.isRight" :label="true">{{item.code}}：</el-checkbox>
                  <el-input style="width:240px" v-model="item.title"></el-input>
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="(res,file)=>{uploadSuccess(item,res,file)}"
                    >
                    <img v-if="item.img" :src="item.img" class="avatar">
                    <span v-else>上传图片</span>
                    <i  class="el-icon-circle-close closeICon" @click="handelClose(item)"></i>
                  </el-upload>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
           type="danger"
           @click="addQuestion"
           :disabled="formData.questionType!=='2'"
           size="small">
           +增加选项与答案
           </el-button>
          </el-form-item>
          <el-form-item label="解析视频：" prop="videoURL">
            <el-input style="width:400px" v-model="formData.videoURL"></el-input>
          </el-form-item>
          <el-form-item label="答案解析：" prop="answer">
              <Tinymce :height="200" v-model="formData.answer"></Tinymce>
          </el-form-item>
          <el-form-item label="题目备注：" prop="remarks">
            <el-input type="textarea" rows="4" style="width:400px" v-model="formData.remarks"></el-input>
          </el-form-item>
          <el-form-item label="试题标签："  prop="tags">
            <el-select  placeholder="请选择试题标签" style="width:400px" v-model="formData.tags" @click.native="tagsChange">
              <el-option :label="item.label" :value="item.value" v-for="item in tagsList" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handelClick">确认提交</el-button>
          </el-form-item>
       </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as getCata } from '@/api/hmmm/directorys.js'
import { list } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { direction, questionType, difficulty } from '@/api/hmmm/constants.js'
import { add } from '@/api/hmmm/questions.js'
import { simple as getTags } from '@/api/hmmm/tags.js'

export default {
  components: {
    Tinymce
  },
  data () {
    return {
      // 表单数据
      formData: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '', // 试题标签
        // options: { // 选项
        //   code: '', // 代码
        //   title: '', // 标题
        //   img: '', // 图片url
        //   isRight: ''// 是否正确答案
        // }
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }

        ]

      },
      // 学科列表
      SubList: [],
      // 目录列表
      cataList: [],
      // 企业列表
      entryList: [],
      // 城市列表
      provinces: [],
      // 区列表
      citys: [],
      // 方向
      directionList: [],
      // 题型
      question: [],
      // 难度
      diff: [],
      tagsList: [],
      // 校验规则ß
      formRules: {
        subjectID: [
          { required: 'true', message: '请选择学科', trigger: 'blur' }
        ], // 学科
        catalogID: [
          { required: 'true', message: '请选择目录', trigger: 'blur' }
        ], // 目录
        enterpriseID: [
          { required: 'true', message: '请选择企业', trigger: 'blur' }
        ], // 企业
        province: [
          { required: 'true', message: '请选择地区', trigger: 'blur' }
        ], // 城市
        city: [
          { required: 'true', message: '请选择地区', trigger: 'blur' }
        ], // 地区
        direction: [
          { required: 'true', message: '请选择方向', trigger: 'blur' }
        ], // 方向
        questionType: [
          { required: 'true' }
        ], // 题型
        difficulty: [
          { required: 'true' }
        ], // 难度
        question: [
          { required: 'true', message: '请输入题干', trigger: 'blur' }
        ], // 题干
        videoURL: '', // 解析视频
        answer: [
          { required: 'true', message: '请输入答案解析', trigger: 'blur' }
        ], // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      fileList: [
        { url: '' }
      ]
    }
  },
  methods: {
    // 获取学科列表
    async getSubList () {
      const { data } = await simple()
      this.SubList = data
      // console.log(this.SubList)
    },
    // 获取目录列表
    async getCataList () {
      const { data } = await getCata()
      this.cataList = data
    },
    // 获取企业列表
    async getEnter () {
      const { data: { items } } = await list()
      // console.log(items)
      this.entryList = items
    },
    // 获取所有城市
    getProvinces () {
      const res = provinces()
      this.provinces = res
    },
    // 城市发生变化时，清空地下区
    hanleChange () {
      this.formData.city = ''
    },
    // 获取城市地下区
    getCitys () {
      // 先清空地下区
      this.formData.city = ''
      const res = citys(this.formData.province)
      this.citys = res
    },
    // 获取方向
    getDirection () {
      this.directionList = direction
    },
    // 单选框绑定值变化时触发的事件
    changeRadio (item) {
      this.formData.options.forEach(item => {
        item.isRight = false
      })
      item.isRight = true
    },
    // 添加答案选项
    addQuestion () {
      this.formData.options.push({
        isRight: false,
        code: String.fromCharCode(65 + this.formData.options.length),
        title: '',
        img: ''
      })
    },
    // 获取标签列表
    async tagsChange () {
      const { data } = await getTags()
      this.tagsList = data
    },
    // 图片上传成功处理函数
    uploadSuccess (item, res, file) {
      item.img = URL.createObjectURL(file.raw)
    },
    handelClose (item) {
      // console.log('删除图片')
      item.img = ''
    },
    // 点击确定提交
    handelClick () {
      // 1.校验表单
      this.$refs.formRef.validate(async boo => {
        console.log(this.formData)
        if (!boo) return this.$message.warning('请先完善表单再提交')
        // 2.发请求
        const res = await add(this.formData)
        console.log(res)
        if (res.status === 200) {
          this.$message.success('试题录入成功')
        }
        // 3.重置表单
        this.$refs.formRef.resetFields()
        // 富文本
        // this.formData.question = ''
        // 单选按钮
        // 4.跳转到基础题库页面
        this.$router.push('/questions/list')
      })
    }
  },
  created () {
    this.question = questionType
    this.diff = difficulty
    // console.log(this.question)
    // console.log(this.diff)
  }
}
</script>

<style lang="scss" scoped>
.option-box{
  margin-bottom: 20px;
  // position: relative;
}

.avatar-uploader{
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  width: 100px;
  height: 60px;
  line-height: 60px;
}
 ::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
 ::v-deep .closeICon{
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%,-50%);
  background: #fff;
  font-size: 18px;
  color: #999;
}
.avatar {
  width: 100px;
  height: 60px;
  display: block;
  overflow: hidden;
}

</style>
